<template>
  <div class="my-header">
    <div class="info-content">
      <!-- 头部展示 -->
      <div class="info-top-title">
        <div>
          <span class="myInfo">我的头像</span
          ><span class="english"> My Head</span>
          <span class="asd"></span>
        </div>
      </div>
      <!-- 我的信息展示 -->
      <div class="show-user-info">
          <div class="head-img">
            <div class="imgs" >
               
                 <el-image :src="realImageUrl"></el-image>
            </div>
          </div>
          <div>
           <div data_d="1" ref="upload" style="    margin-top: 45px;
    margin-left: 50px;">
              <el-upload
                action="http://localhost:8081/wangUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </div>
      </div>
      <div class="submit-info">
        <el-button type="primary" @click="submitUserImg">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import {message} from "@/mixin.js"
export default {
  name: "MyHeader",
  mixins:[message],
  mounted(){
     
  },
  data() {
    return {
      textarea: "",
         dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
          realImageUrl:this.$store.state.userInfo.userImg, //真实服务器图片地址
    };
  },
  methods:{
    submitUserImg(){
      const that = this;
      if(this.$store.state.user == 0 || this.$store.state.user==""){
        tghis.open4("请先登录")
      }else{
        //提交用户图片数据
        axios({
          method:'post',
          url:"/aabbcc/user/updateImg",
          params:{
              userId:this.$store.state.user,
              imgName:that.realImageUrl
          }
        }).then(function(res){
          if(res.data.code == 200){
            that.open2(res.data.massage)
            that.$store.commit("handlerUser", {
                userInfo: res.data.obj,

              });
            setTimeout(() => {
             location.reload();
            }, 4000);
          }else{
             that.open4(res.data.massage)
          }
        })
      }
    },
     handleRemove(file, fileList) {
      
      axios({
        method: "get",
        url: "/aabbcc/deletewangUpload",
        params: {
          url: this.realImageUrl,
        },
      }).then(function (res) {});
      setTimeout(() => {
          this.realImageUrl = "https://profile.csdnimg.cn/A/1/8/1_qq_49606439"
      }, 100);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.addVisible = false;
    },
    handleSuccess(response, file, fileList) {
      this.realImageUrl = response.data[0];
    },
     open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
   
  }
};
</script>

<style scoped>



.my-header {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
/*头部 */
.info-top-title {
  width: 100%;
  height: 30px;
}
.info-top-title .myInfo {
  color: #333;
  font-size: 25px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.info-top-title > div {
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
}
.info-top-title > div:hover .asd {
  opacity: 1;
  transform: scaleX(1);
  transition: all 0.5s linear;
}
.info-top-title .asd {
  width: 100%;
  border: 1px solid #2882c5;
  /* height: 1px; */
  /* background: red; */
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
}
/* 我的信息展示 */
.show-user-info {
  width: 100%;
  margin-top: 30px;
}
.submit-info {
  width: 100%;
  height: 71px;
  position: relative;
  /* display: block; */
  top: 20px;
}
.submit-info button {
  position: absolute;
  right: 0;
}
.head-img{
      width: 100%;
}
.head-img .imgs{
  width: 25%;
      margin-left: 54px;
}



</style>